import React, { useEffect, useState } from "react";
import LeftArraw from "../LeftArraw";
import { useBoolean } from "ahooks";
import style from "./style.module.scss";
import { useNavigate } from "react-router-dom";
import { getHttp } from "../../../../api";
import { useAppSelector } from "../../../../store/hooks";
import { useDispatch } from "react-redux";
import { addrecordId } from "../../../../store/doctorDetail/doctorDetailSlice";
import { Empty, Button, List } from "react-vant";
import { getTimeFormatText } from "../../../../utils/formatTime";
// 定义问诊信息接口
interface IConsultationInfo {
  recordId: number;
  imagePic: string;
  doctorName: string;
  jobTitle: string;
  department: string;
  inquiryTime: string;
  evaluateStatus: number;
}
const Index: React.FC = () => {
  const userId = useAppSelector((state) => state.user.userInfo.userId);
  const sessionId = useAppSelector((state) => state.user.userInfo.sessionId);

  const dispatch = useDispatch();
  const navigate = useNavigate();

  //跳转到咨询
  const handleRecordClick = (info) => {
    console.log(info)
    // doctorId
    // doctorName
    // recordId
    navigate(`/consultation/chat?recordId=${info.recordId}&doctorId=${info.doctorId}&doctorName=${info.doctorName}&type=2&imagePic=${info.imagePic}`);
  };
  //判断是否评价更换路由
  const handleCommentClick = (info) => {
    if (info.evaluateStatus === 1) {
      navigate("/consultation/my/comment?doctorId=" + info.doctorId);
    } else {
      navigate("/consultation/my/query/comment");
    }
    dispatch(addrecordId(info.recordId));
  };
  //调用查看历史评价接口
  const [consultationInfo, setConsultationInfo] = useState<IConsultationInfo[]>(
    []
  );
  const [finish, { setTrue, setFalse }] = useBoolean(false);
  const count = 5;
  const [page, setPage] = useState(1);
  const mergeInfoListData = async () => {
    const resp = await getHttp(
      "/health/user/inquiry/verify/v1/findHistoryInquiryRecord",
      { page: page, count: count },
      { userId: userId, sessionId: sessionId }
    );
    // 是否存在更多数据
    console.log(resp.result);

    if (resp.result.length >0) {
      if (page == 1) {
        // 数据不合并
        setConsultationInfo(resp.result);
        console.log("数据不合并");
      } else {
        // 请求非第一页， 请求合并
        console.log("请求非第一页， 请求合并");
        setConsultationInfo([...consultationInfo, ...resp.result]);
      }
      // 下一次请求页码 + 1
      setPage(page + 1);
    } else {
      // 请求完成 没有更多数据
      console.log("请求完成 没有更多数据");

      setTrue();
    }
    console.log(resp);
  };
  useEffect(() => {
    setFalse();
    mergeInfoListData();
  }, [userId, sessionId]);
  return (
    <div>
      <LeftArraw title="历史问诊"></LeftArraw>
      {consultationInfo.length !== 0 ? (
        <List
          finished={finish}
          onLoad={mergeInfoListData}
          finishedText="没有更多数据了"
        >
          <div className={style.container}>
            {consultationInfo.map((info) => (
              <div className={style.div} key={info.recordId}>
                <dl className={style.card}>
                  <dt>
                    <img src={info.imagePic} alt="" />
                  </dt>
                  <dd>
                    <div className={style.title}>
                      <h3>
                        {info.doctorName}
                        <span>
                          {info.department}
                          {info.jobTitle}
                        </span>
                      </h3>
                      <p>
                        问诊时间:{getTimeFormatText(new Date(info.inquiryTime))}
                      </p>
                    </div>
                    <div className={style.btn}>
                      <button
                        className={style.btn1}
                        onClick={() => handleRecordClick(info)}
                      >
                        查看问诊记录
                      </button>

                      <button
                        className={style.btn2}
                        onClick={() => handleCommentClick(info)}
                      >
                        {info.evaluateStatus == 1 ? "去评价" : "查看评价"}
                      </button>
                    </div>
                  </dd>
                </dl>
              </div>
            ))}
          </div>
        </List>
      ) : (
        <div>
          <Empty description="暂无问诊">
            <Button
              style={{ width: 160 }}
              round
              type="primary"
              onClick={() => navigate("/my")}
            >
              返回
            </Button>
          </Empty>
        </div>
      )}
    </div>
  );
};

export default Index;
